<div class="container">
  <!--  -->
    <div class="left">
      <!-- <div class="goNext" (click)="goNext()" >></div> -->
          <!-- <div class="goLast"  (click)="goLast()">></div> -->
        <nz-carousel [nzEffect]="effect">
            <!-- <div  nz-carousel-content *ngFor="let item of array">
              <img [src]=HouseDetali.HousePicList._Items[1].PicUrl alt="" style="width: 100%;height: 100%;">
            </div> -->
            <div  nz-carousel-content *ngFor="let item of HouseDetali.HousePicList._Items">
              <img [src]=item.PicUrl alt="" style="width: 100%;height: 100%;">
            </div>
          </nz-carousel>
    </div>
    <!-- 右侧信息 -->
    <div class="right">
    <span>
        <h1>{{HouseDetali.Community}}</h1>
        <span nz-icon nzType="star" [nzTheme]="'twotone'" [nzTwotoneColor]="collectionColor" (click)="goCollection()"></span>
    </span>
    <p class="money">{{HouseDetali.Rent}}元/月</p>
    <p>面积：{{HouseDetali.Size}}m²</p>
    <p>户型：{{HouseDetali.Rooms}}室</p>
    <p>出租类型：{{HouseDetali.Type==2?'合租':'整租'}}</p>
    <p>区域：{{HouseDetali.Province}}-{{HouseDetali.City}}-{{HouseDetali.Region}}</p>
    <p>位置：{{HouseDetali.DetailAddress}}</p>
    <p>其他：{{HouseDetali.Description}}</p>
    <!-- <button  nz-button nzType="primary" class="reserve" (click)="showModal()">预约看房</button> -->
    <button *ngIf="!isReverse" nz-button nzType="primary" class="reserve" (click)="showModal()">预约看房</button>
    <button
    class="Cancelreserve"
    *ngIf="isReverse"
    nz-popconfirm
    nzPopconfirmTitle="确定取消预约吗？"
    (nzOnConfirm)="confirm()"
    (nzOnCancel)="cancel()"
    nzPopconfirmPlacement="top"
    nz-button
  >取消预约</button>
    <div *ngIf="isReverse" class="reverseTip">已预约时间：
      <p>{{reverseDateTure}}:{{reverseTimeTure}}</p>
    </div>
    <!-- 预约看房提示框 -->
    <nz-modal
      [(nzVisible)]="isVisible"
      nzTitle="预约看房"
      (nzOnCancel)="handleCancel()"
      (nzOnOk)="handleOk()"
      [nzOkLoading]="isOkLoading"
    >
    <ng-container class="reverse" *nzModalContent>
      <div style="margin-bottom: 30px;">
        选择预约日期:&nbsp;&nbsp;&nbsp;
            <nz-select [(ngModel)]="reverseDay" nzPlaceHolder="请选择期限" class="selectMsg">
              <nz-option *ngFor="let roles of reverseArr;let i = index" [nzValue]="roles['Key']" [nzLabel]="roles['Key']"></nz-option>
            </nz-select>
      </div>
      <div>
        选择预约时间段:
            <nz-select [(ngModel)]="reverseTime" nzPlaceHolder="请选择期限" (nzFocus)="selectFoucus()">
              <!-- <nz-option  *ngFor="let roles of reverseTimeArr; " [nzValue]="roles['Key']" [nzLabel]="roles['Key']"></nz-option> -->
              <nz-option  *ngFor="let roles of reverseTimeArr;let i = index " [nzValue]="roles['Key']" [nzLabel]="roles['Value']"></nz-option>
            </nz-select>
      </div>
    </ng-container>
    </nz-modal>
    <button class="sign" (click)="goCollectionPage()">签约</button>
    <!-- 签约提示框 -->
    <nz-modal [(nzVisible)]="isVisible_sign" nzTitle="签约提示" (nzOnCancel)="handleCancel_sign()" (nzOnOk)="handleOk_sign()">
      <ng-container *nzModalContent>
        <p>尊敬的用户，您还没完成实名认证，请到个人中心完成实名认证后再签约哦~</p>
      </ng-container>
    </nz-modal>
    </div>
</div>
<div class="comments">
  <div class="title">
    <h1>房源评价</h1>
  </div>
  <div class="TotalComment">
    <p>{{value}}分</p>
    <nz-rate class="score" [(ngModel)]="value" nzDisabled [nzTooltips]="tooltips"></nz-rate>
    <span *ngIf="value" class="ant-rate-text">{{ value ? tooltips[value - 1] : '' }}</span>
  </div>
  <div class="commentsList">
    <nz-list *ngIf="data.length" [nzDataSource]="data" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
      <ng-template #item let-item>
        <nz-comment [nzAuthor]="item.CustomerName" [nzDatetime]="item.SendTime">
          <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="item.Avatar"></nz-avatar>
          <nz-comment-content>
            <p>{{ item.Comments }}</p>
          </nz-comment-content>
        <nz-rate class="score2" [ngModel]="item.Score" nzDisabled></nz-rate>
        </nz-comment>
      </ng-template>
    </nz-list>
    <nz-comment>
      <!-- <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="user.avatar"></nz-avatar> -->
      <nz-comment-content>
        <nz-form-item class="commentDetail">
          <nz-rate [ngModel]="UserRateValue"(ngModelChange)="RateChange($event)"></nz-rate>
          <textarea [(ngModel)]="inputValue" nz-input rows="4">
          </textarea>
        </nz-form-item>
        <nz-form-item>
          <button nz-button nzType="primary" [nzLoading]="submitting" [disabled]="!inputValue" (click)="handleSubmit()">
            Add Comment
          </button>
        </nz-form-item>
      </nz-comment-content>
    </nz-comment>
  </div>
</div>